<template>
  <q-page padding class="row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <p class="caption" style="margin-top: 120px;">
        Click on buttons and image below to open Popovers.
        <br>
        <em>This page has intended scroll so you can see multiple scenarios.</em>
      </p>

      <div>
        <q-btn color="primary">
          <q-icon name="assignment" />

          <q-popover>
            <q-list link separator class="scroll" style="min-width: 100px">
              <q-item
                v-for="n in 20"
                :key="`a-${n}`"
                v-close-overlay
                @click.native="notify"
              >
                <q-item-main label="Label" sublabel="Click me" />
              </q-item>
            </q-list>
          </q-popover>
        </q-btn>

        <q-btn ref="target4" color="negative" class="q-ml-sm">
          Disabled Popover

          <q-popover disable>
            This Popover content won't be shown because of "disable"
          </q-popover>
        </q-btn>

        <q-card style="margin-top: 75px">
          <q-card-title class="bg-primary text-center">
            <q-btn push color="orange">
              Tap Me

              <q-popover
                :anchor="anchor"
                :self="self"
              >
                <q-list link style="min-width: 100px">
                  <q-item
                    v-for="n in 3"
                    :key="`b-${n}`"
                    v-close-overlay
                    @click.native="notify"
                  >
                    <q-item-main label="Label" />
                  </q-item>
                </q-list>
              </q-popover>
            </q-btn>
          </q-card-title>

          <p class="caption text-center">Configure the Popover for button above.</p>
          <p class="text-center">
            <q-chip tag color="primary">anchor="{{ anchor }}"</q-chip>
            <q-chip tag color="primary">self="{{ self }}"</q-chip>
          </p>
          <q-card-main class="row">
            <div class="column items-center col-6">
              <p class="caption">Anchor Origin</p>
              <div class="flex">
                <div class="column group">
                  <div>Vertical</div>
                  <q-radio v-model="anchorOrigin.vertical" val="top" label="Top" />
                  <q-radio v-model="anchorOrigin.vertical" val="center" label="Center" />
                  <q-radio v-model="anchorOrigin.vertical" val="bottom" label="Bottom" />
                </div>
                <div class="column group">
                  <div>Horizontal</div>
                  <q-radio v-model="anchorOrigin.horizontal" val="left" label="Left" />
                  <q-radio v-model="anchorOrigin.horizontal" val="middle" label="Middle" />
                  <q-radio v-model="anchorOrigin.horizontal" val="right" label="Right" />
                </div>
              </div>
            </div>

            <div class="column items-center col-6">
              <p class="caption">Self Origin</p>
              <div class="flex">
                <div class="column group">
                  <div>Vertical</div>
                  <q-radio v-model="selfOrigin.vertical" val="top" label="Top" />
                  <q-radio v-model="selfOrigin.vertical" val="center" label="Center" />
                  <q-radio v-model="selfOrigin.vertical" val="bottom" label="Bottom" />
                </div>
                <div class="column group">
                  <div>Horizontal</div>
                  <q-radio v-model="selfOrigin.horizontal" val="left" label="Left" />
                  <q-radio v-model="selfOrigin.horizontal" val="middle" label="Middle" />
                  <q-radio v-model="selfOrigin.horizontal" val="right" label="Right" />
                </div>
              </div>
            </div>
          </q-card-main>
        </q-card>

        <div style="margin-bottom: 700px;" />

        <q-page-sticky position="top-right" :offset="[16, 16]">
          <q-btn color="secondary">
            <q-icon name="directions" />

            <!-- with v-model -->
            <q-popover v-model="popover">
              <img
                src="~assets/map.png"
                style="height: 150px; width: 200px;"
                @click="notify(), popover = false"
              >
            </q-popover>
          </q-btn>
        </q-page-sticky>

        <q-page-sticky position="bottom-right" :offset="[16, 16]">
          <q-btn color="tertiary">
            <q-icon name="plus_one" />

            <q-popover>
              <div class="group" style="width: 220px; text-align: center;">
                <q-btn flat color="primary" v-close-overlay @click="notify">
                  <q-icon name="thumb_up" />
                </q-btn>
                <q-btn flat color="primary" v-close-overlay @click="notify">
                  <q-icon name="thumb_down" />
                </q-btn>
                <q-btn flat color="secondary" v-close-overlay @click="notify">
                  <q-icon name="share" />
                </q-btn>
              </div>
            </q-popover>
          </q-btn>
        </q-page-sticky>
      </div>

      <q-page-sticky position="bottom-left" :offset="[16, 16]">
        <q-btn color="primary">
          <q-icon name="menu" />

          <!-- with Vue reference -->
          <q-popover ref="popover">
            <q-list link separator class="scroll" style="min-width: 200px">
              <q-item
                v-for="n in 20"
                :key="`c-${n}`"
                @click.native="notify(), $refs.popover.hide()"
              >
                <q-item-main label="Label" sublabel="Click me" />
              </q-item>
            </q-list>
          </q-popover>
        </q-btn>
      </q-page-sticky>
    </div>
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      anchorOrigin: {vertical: 'bottom', horizontal: 'left'},
      selfOrigin: {vertical: 'top', horizontal: 'left'},
      popover: false
    }
  },
  computed: {
    anchor () {
      return `${this.anchorOrigin.vertical} ${this.anchorOrigin.horizontal}`
    },
    self () {
      return `${this.selfOrigin.vertical} ${this.selfOrigin.horizontal}`
    }
  },
  methods: {
    notify () {
      this.$q.notify((this.$q.platform.is.desktop ? 'Clicked' : 'Tapped') + ' on a Popover item')
    }
  }
}
</script>
